<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="changeObj">改变对象</button>
    {{obj}}
    <ul>
      <li v-for="(item, index) in arr" :key="index" @click="changeArr(index)">{{item}}</li>
    </ul>
  </div>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        obj:{
          name: '白粉花'
        },
        arr: [1, 2, 3, 4]
      },
      methods: {
        changeObj() {
          //对象的属性的增减无法响应式的变化
          this.obj.age = 15;
          console.log(this.obj);
          //针对对象也可以使用$set方法来修改，但不推荐，规定对象直接定义在data中
        },
        changeArr(index){
          //通过下标改变数组的数据无法响应式改变
          // this.arr[index] = 100
          // console.log(this.arr);
          //针对数组的变化，vue提供了原型上的$set实现响应式数据
          /* 
            $set(目标对象，索引，新值)
          */
          this.$set(this.arr, index, 1000)
        }
      }
    })
    
  </script>
</body>

</html>